<template>
	<!-- 商品 -->
	<view class="Swiper">
		<swiper :autoplay="true" :interval="3000" :circular="true" style="height: 700rpx;">
			<swiper-item v-for="(item,index) in dataArr.goodsSwiper" :key="index">
				<image v-if="dataArr.goodsSwiper[index].is==true" src="/static/Mall/mo.png" style="height: 700rpx;"
					@click="MyImage(dataArr.goodsSwiper[index].msg,0)" />
				<image v-else :src="'/static/Mall/'+dataArr.goodsSwiper[index]" style="height: 700rpx;"
					@click="MyImage(dataArr.goodsSwiper[index],1)" />
			</swiper-item>
		</swiper>
	</view>
	<view class="Synopsis">
		<text>{{dataArr.goodsName}}</text>
		<text>{{dataArr.goodsIntro}}</text>
		<view v-if="dataArr!=''">￥{{dataArr.goodsPrice[0]}}<text>￥{{dataArr.goodsPriceOld}}</text></view>
	</view>
	<view class="Button">
		<text :class="buttonNum==0?'ButtonSelect':''" @click="ButtonChange(0)">详情</text>
		<text :class="buttonNum==1?'ButtonSelect':''" @click="ButtonChange(1)">评论</text>
	</view>
	<view v-show="buttonNum==0" class="Details">
		<view>商品介绍</view>
		<view v-html="dataArr.goodsDetails"></view>
	</view>
	<view v-show="buttonNum==1" class="Comment">
		<view>用户评论</view>
		<view v-if="commentArr.length!=0" v-for="(item,index) in commentArr" :key="index" class="C_content">
			<view>
				<image :src="item.vipavatar" />
				<view>
					<text>{{item.vipName}}</text>
					<text>{{new Date(item.gc_time).toLocaleString()}}</text>
				</view>
			</view>
			<view>
				<text>{{item.gc_text}}</text>
				<view v-html="item.gc_img"></view>
			</view>
		</view>
		<view v-else class="C_no">暂无评论~</view>
	</view>
	<view class="GoCart" @click="ShoppingCart"><text class="iconfont .icon-gouwuche" /></view>
	<view class="Footer">
		<view @click="CustomerService">
			<text class="iconfont .icon-kefu" />
			<text>联系客服</text>
		</view>
		<view @click="Add"><text>加入购物车</text><text v-if="selectLabel!=''">（已选择：{{selectLabel}})</text></view>
		<view @click="ImmediatePurchase">立即购买</view>
	</view>
	<!-- 模态框 -->
	<uni-popup ref="popup" safeArea backgroundColor="#fff">
		<view class="myModel">
			<view>请选择规格：<text v-if="selectMoney!=''">￥{{selectMoney}}</text></view>
			<view>
				<view v-for="(item,index) in dataArr.goodsSpec" :key="index" :class="selectLabel==item?'mySelect':''"
					@click="SelectLabel(item,index)">
					{{item}}
				</view>
			</view>
			<view>
				<view @click="AddOk">加入购物车</view>
				<view @click="ImmediatePurchase">立即购买</view>
			</view>
		</view>
	</uni-popup>
	<!-- 模态框2 -->
	<uni-popup ref="popup2" safeArea backgroundColor="#fff">
		<movable-area class="MoveFu" @click="MyImage2">
			<video v-if="vORi==0" :src="modelImg" @click.stop="Null" style="width: 750rpx;"></video>
			<movable-view v-if="vORi==1" :x="x" :y="y" direction="all" scale="true" @change="onChange" class="MoveZi">
				<image v-if="modelImg!=''" :src="'/static/Mall/'+modelImg" mode="widthFix" />
			</movable-view>
		</movable-area>
	</uni-popup>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				//移动
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				//移动
				goodsId: -1,
				buttonNum: 0,
				selectLabel: "",
				selectMoney: "",
				dataArr: [],
				commentArr: [],
				modelImg: "",
				vORi: 0, //视频还是图片
				onChange: function(e) {
					this.old.x = e.detail.x
					this.old.y = e.detail.y
				},
				MyImage: function(mysrc, i) {
					data.modelImg = mysrc;
					data.vORi = i;
					this.$refs.popup2.open('center');
				},
				MyImage2: function() {
					this.$refs.popup2.close();
				},
				ButtonChange: function(num) {
					if (data.buttonNum != num) {
						data.buttonNum = num;
					}
				},
				ShoppingCart: function() {
					uni.navigateTo({
						url: 'ShoppingCart'
					});
				},
				CustomerService: function() {
					console.log("联系客服");
				},
				Add: function() {
					this.$refs.popup.open('bottom');
				},
				AddOk: function() {
					if (data.selectLabel == "") {
						// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
						this.$refs.popup.open('bottom');
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
					} else {
						myRequest({
							url: "/sC_add",
							method: 'POST',
							data: {
								vipId: store.state.userdata[0].vipId,
								goodsId: data.goodsId,
								label: data.selectLabel,
								money: data.selectMoney
							},
						}).then((res) => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '添加成功',
									duration: 2000
								});
								data.selectLabel = "";
								this.$refs.popup.close();
							}
						})
					}
				},
				SelectLabel: function(item, index) {
					data.selectLabel = item;
					data.selectMoney = data.dataArr.goodsPrice[index];
				},
				ImmediatePurchase: function() {
					if (data.selectLabel == "") {
						this.$refs.popup.open('bottom');
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
					} else {
						store.commit('emptyOrderPayGoods');
						store.commit('pushOrderPayGoods', {
							...data.dataArr,
							sc_label: data.selectLabel,
							sc_money: data.selectMoney,
							sc_num: 1
						});
						store.commit('editCartORgoods', 0);
						uni.navigateTo({
							url: 'GoodsSettlement'
						});
					}
				},
				// 商品请求
				shoppingRequest: function(i) {
					myRequest({
						url: "/getgoodsId",
						method: 'POST',
						data: {
							id: i
						},
					}).then((res) => {
						if (res.data.code == 200) {
							data.dataArr = res.data.data[0];
							data.dataArr.goodsSpec = JSON.parse(data.dataArr.goodsSpec);
							data.dataArr.goodsSwiper = JSON.parse(data.dataArr.goodsSwiper);
							data.dataArr.goodsPrice = JSON.parse(data.dataArr.goodsPrice);
						}
					})
				},
				// 评论请求
				commentRequest: function(i) {
					myRequest({
						url: "/CgetData",
						method: 'POST',
						data: {
							id: i
						},
					}).then((res) => {
						if (res.data.code == 200) {
							data.commentArr = res.data.data;
						}
					})
				},
				Null: function() {}
			});
			onLoad((option) => {
				data.goodsId = Number(option.id);
				data.shoppingRequest(option.id);
				data.commentRequest(option.id);
			})
			return data;
		},
	}
</script>

<style>
	@import url('~@/static/Mall/iconfont.css');

	.Swiper image {
		width: 750rpx;
	}

	.Synopsis {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.Synopsis>text:nth-of-type(1) {
		font-size: 40rpx;
		font-weight: bold;
	}

	.Synopsis>text:nth-of-type(2) {
		margin: 16rpx 0;
		font-size: 28rpx;
	}

	.Synopsis>view {
		font-size: 40rpx;
		font-weight: bold;
		color: #3478F7;
	}

	.Synopsis>view>text {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: normal;
		color: #CCCCCC;
		text-decoration: line-through;
	}

	.Button {
		border-top: 1rpx solid #CCCCCC;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.Button>text {
		display: inline-block;
		width: 375rpx;
		padding: 20rpx 0;
		font-weight: bold;
		text-align: center;
		color: #999999;
	}

	.Button>.ButtonSelect {
		color: #000000;
		border-bottom: 4rpx solid #000000;
	}

	.Details {
		padding: 0 30rpx 120rpx 30rpx;
	}

	.Details>view:nth-of-type(1) {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
	}

	.Details>view:nth-of-type(2) {
		font-size: 30rpx;
	}

	.Details>view:nth-of-type(2) .text_img {
		max-width: 690rpx;
		display: block;
		margin: 20rpx auto;
	}

	.Comment {
		padding: 0 30rpx 120rpx 30rpx;
	}

	.Comment>view:nth-of-type(1) {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
	}

	.Comment .C_content {
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.Comment .C_content>view:nth-of-type(1) {
		display: flex;
	}

	.Comment .C_content>view:nth-of-type(1)>image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10rpx;
		border-radius: 35rpx;
	}

	.Comment .C_content>view:nth-of-type(1)>view {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.Comment .C_content>view:nth-of-type(1)>view>text:nth-of-type(2) {
		color: #999999;
	}

	.Comment .C_content>view:nth-of-type(2) {
		padding: 10rpx 0 0 80rpx;
	}

	.Comment .C_content>view:nth-of-type(2)>view {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.Comment .C_content>view:nth-of-type(2)>view .comment_img {
		width: 203rpx;
		height: 203rpx;
	}

	.Comment .C_no {
		color: #969896;
		text-align: center;
	}

	.GoCart {
		position: fixed;
		right: 40rpx;
		bottom: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}

	.Footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}

	.Footer>view:nth-child(1) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 120rpx;
		color: #999999;
	}

	.Footer>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 250rpx;
		height: 120rpx;
		color: #FFFFFF;
		background-color: #FF9900;
	}

	.Footer>view:nth-child(3) {
		width: 300rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}

	.myModel>view:nth-of-type(1) {
		font-size: 32rpx;
		padding: 30rpx 10rpx 0 10rpx;
	}

	.myModel>view:nth-of-type(1)>text {
		font-weight: bold;
		color: #FF0000;
	}

	.myModel>view:nth-of-type(2) {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 0 30rpx 0;
		padding: 30rpx 10rpx 0 10rpx;
		font-size: 28rpx;
	}

	.myModel>view:nth-of-type(2)>view {
		margin: 6rpx 12rpx;
		padding: 10rpx 30rpx;
		border: 2rpx solid #999999;
		border-radius: 10rpx;
	}

	.myModel>view:nth-of-type(2)>.mySelect {
		color: #FF9900;
		border: 2rpx solid #FF9900;
	}

	.myModel>view:nth-of-type(3) {
		display: flex;
	}

	.myModel>view:nth-of-type(3)>view:nth-of-type(1) {
		width: 375rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #FF9900;
	}

	.myModel>view:nth-of-type(3)>view:nth-of-type(2) {
		width: 375rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}

	.MoveFu {
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000000;
	}

	.MoveZi {
		width: 750rpx;
		height: 750rpx;
	}

	.MoveZi image {
		display: block;
		width: 750rpx;
	}
</style>
